<template>
    <div class="flex-1">
        <!-- title -->
        <div
            class="p-[0_20px] h-50px flex items-center b-b b-b-solid b-b-[#e1e2e5] box-border"
            >
            <span class="inline-block w4px h13px bg-#00a1d6 m-r-5px"></span>
            <span class="c-#00a1d6 text-14px">我的信息</span>
        </div>

        <!-- info-content -->
        <el-form class="p-[20px]" :model="userInfo" label-width="80px">
            <el-form-item label="昵称">
                <el-input class="w-50" v-model="userInfo.userVo.nickName" maxlength="10" placeholder="你的昵称"/>
                <span class="c-#898989 m-l-60px">注：修改一次昵称需要消耗6个硬币</span>
            </el-form-item>
            <el-form-item label="用户名">
                <span class="c-#898989">{{userInfo.userVo.userName}}</span>
            </el-form-item>
            <el-form-item label="我的签名">
                <el-input v-model="userInfo.signature" type="textarea" placeholder="设置您的签名- ( ゜- ゜)つロ"/>
            </el-form-item>
            <!-- <el-form-item label="性别">
                <el-radio-group v-model="form.resource">
                    <el-radio label="男" />
                    <el-radio label="女" />
                </el-radio-group>
            </el-form-item> -->
            <el-form-item label="出生日期">
                <el-date-picker
                    v-model="userInfo.birthday"
                    type="date"
                    placeholder="选择日期"
                    />
            </el-form-item>
            <el-form-item label="学校信息">
                <span class="c-#898989">*学校信息当前仅支持在App中进行编辑（需升级至6.34及以上版本）</span>
            </el-form-item>

            <div class="text-center m-t-40px">
                <el-button class="w-110px h-40px" type="primary" @click="onSubmit">保存</el-button>
            </div>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import type { UserInfoVo } from '@/api/user/types'
import { useUserStore } from '@/store/userStore'
import { ref } from 'vue'
import cloneDeep from 'lodash/cloneDeep'

const userStore = useUserStore();

const userInfo = ref<UserInfoVo>(cloneDeep(userStore.userInfo));

const onSubmit = async () => {

   userInfo.value.userVo.avatar = ''
   await userStore.updUserInfo(userInfo.value);
   
}

</script>

<style scoped>

</style>